<template>
	<view class="login-page">
		<u-navbar leftIconColor="#ffffff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				忘记密码
			</view>
		</u-navbar>
		<view class="login-info">
			<view class="title">注册手机号</view>
			<view class="input">
				<u-input placeholder="请输入您的手机号" :maxlength="11" shape="circle" border="none" v-model="tel"
					type="number"></u-input>
			</view>
			<view class="title">验证码</view>
			<view class="input">
				<u-input placeholder="请输入验证码" v-model="code" border="none">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode"  type="success" size="mini" color="rgba(0,0,0,0.0)"
							class="custom-btn"><text style="font-size: 26rpx;">{{tips}}</text></u-button>
					</template>
				</u-input>
			</view>
			<view class="title">请设置新密码</view>
			<view class="input">
				<u-input placeholder="请设置您的新登录密码" shape="circle" type="password" border="none"
					v-model="password"></u-input>
			</view>
			<view class="btn">
				<u-button style="color: #000;" @click="goForget"  size="large" type="primary" color="linear-gradient(255.89deg, #FFF0E3 6.94%, #D7B39A 87.16%)"
					text="确定修改"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				tel: '',
				password: '',
				code: '',
				checked: false,
				tips: '',
			}
		},
		methods: {
			gochecked(e) {
				this.checked = e
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						if (this.tel == '') {
							uni.showToast({
								title: '手机号不可为空！',
								icon: 'none'
							})
							return
						}
						let params = {
							phone: this.tel,
						}
						this.$Request({
							method: 'POST',
							url: '/api/login/sendRegister',
							data: params,
							ismsg: true,
						}).then(res => {
							uni.hideLoading()
							if (res.code == 1) {
								uni.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							}
						})
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			md5Encrypt(text) {
				return CryptoJS.MD5(text).toString();
			},
			goForget() {
				const regex = /^(?=.*[a-zA-Z])(?=.*\d).{9,}$/;
				if (this.tel == '') {
					uni.showToast({
						title: '手机号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: '验证码不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不可为空！',
						icon: 'none'
					})
					return
				}
				if(regex.test(this.password) == false){
					uni.showToast({
						title: '密码长度必须大于8位数并且包含字母和数组！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					phone: this.tel,
					password: this.md5Encrypt(this.password),
					code:this.code
				}
				this.$Request({
					method: 'POST',
					url: '/api/login/forget_pass',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.reLaunch({
							url:'/pages/login/index'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.custom-btn {
		color: #52ECFA !important;
	}
	page{
		background-color: #000000;
	}
</style>
<style scoped lang="scss">
	.login-page {
		height: 100vh;
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 593px;
		.nav-title{
			color: #fff;
		}
		.login-info {
			width: 95%;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 30rpx;
			.title{
				color: #ffffff;
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
			.btn {
				margin-top: 30rpx;
			}
		
			.input {
				background-color: #1A1A1B;
				margin-bottom: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
			}
		}

		.bottom {
			position: fixed;
			bottom: 5%;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;

			text {
				color: #FD5772;
			}
		}
	}
</style>